<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
  <div style="position: absolute;left: 10px;top: 10px;">
    <button @click="chengebtns()">cesium</button>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"
// 设置静态资源路径
window.CESIUM_BASE_URL = "/"
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTkyZDVmZS03MGNiLTQ4YmQtYTUwMS02YTI0Y2E4OTE2YjciLCJpZCI6MjY1MjI2LCJpYXQiOjE3MzUyODM3MDJ9.HX2jU9DxJdbu9WYQW9iFkLTvSgJtTnBehN89Da7ImUw'



const rectPrimitive = new Cesium.Primitive({
    // geometryInstances: [rectInstance,circleInstance],
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
    })
  })
// 设置cesium默认视角
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   89.5,  //西边经度
//   20.4,   //南边纬度
//   110.4,  //东边经度
//   61.2  //北边纬度
// )

onMounted(async () => {
  console.log(Cesium)
  var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
  var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
  var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: false,
    // 搜索按钮
    geocoder: false,
    // home按钮
    homeButton: false,
    // 控制查看器显示模式
    sceneModePicker: false,
    // 是否显示涂层选择器
    baseLayerPicker: false,
    // 是否显示动画控件
    animation: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 全屏按钮
    fullscreenButton: false,
    // 是否显示VR控件
    // vrButton:false,
    // 是否显示时间轴控件
    timeline: false,
    sunLightFlag: true, //太阳光照开关
    globeFlag: true,
    // 设置天空盒子
    skyBox: new Cesium.SkyBox({
      sources: {
        positiveX: require('@/assets/SkyBox/px.png'),
        negativeX: require('@/assets/SkyBox/nx.png'),
        positiveY: require('@/assets/SkyBox/ny.png'),
        negativeY: require('@/assets/SkyBox/py.png'),
        positiveZ: require('@/assets/SkyBox/pz.png'),
        negativeZ: require('@/assets/SkyBox/nz.png'),
      }
    }),
    // 控制默认地图显示
    // imageryProvider: false,
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })

  })
  // 117.96587800, 40.18911900
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  //   //  将三维球定位到中国
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.56432606, 39.90923611, 5000),
    // cesium 构件的是一个三维场景 视角应该有三个角度 （方位角，俯仰角，滚动角）
    orientation: {
      // 方位角
      heading: Cesium.Math.toRadians(300),
      //俯仰角
      pitch: Cesium.Math.toRadians(-90),
      //滚动角
      roll: Cesium.Math.toRadians(0)
    },
    complete: function callback() {
      // 定位完成之后的回调函数
    }
  });
  // 利用图源来绘制一个矩形
  // 图源绘制可视化对象 过程会更加麻烦一些（可控制性更强 => 自定义着色器 自定义材质 实现可定义的效果）
  // 1.创建一个矩形形状
  const rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      116.56432606, 39.90923611, 117.96587800, 40.18911900
    ),
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    height: 0,
    extrudedHeight: 1000,
    closeTop: true,
  })
  // 1.2 创建一个圆形形状
  const circleGeometry = new Cesium.CircleGeometry({
    center: Cesium.Cartesian3.fromDegrees(116.56432606, 39.90923611),
    radius: 1000,
  })
  // 2.创建具体的矩形实例
  const rectInstance = new Cesium.GeometryInstance({
    id: 'rect',
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        new Cesium.Color(1.0, 0.0, 0.0, 0.5)
      )
    }
  })
  // 2.2创建一个圆形实例
  const circleInstance = new Cesium.GeometryInstance({
    geometry: circleGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        new Cesium.Color(1.0, 0.0, 0.0, 0.5)
      )
    }
  })
  // 3.创建矩形图源
  rectPrimitive.geometryInstances = [rectInstance,circleInstance]
//  rectPrimitive = new Cesium.Primitive({
//     geometryInstances: [rectInstance,circleInstance],
//     appearance: new Cesium.PerInstanceColorAppearance({
//       flat: true,
//     })
//   })
  // 将图源添加到场景中
  // viewer.scene.primitives.add(rectPrimitive)
})
 function chengebtns(){
  console.log(rectPrimitive)
  // return
  const attr = rectPrimitive.getGeometryInstanceAttributes('rect')
  attr.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromCssColorString('#fff'))
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
